<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link href="jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="jquery-easyui/themes/icon.css" rel="stylesheet">
<script src="jquery-easyui/jquery.min.js"></script>
<script src="jquery-easyui/jquery.easyui.min.js"></script>
<script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body style="background-image: url(image/lbg.jpg)">
	<div style="margin: 0 auto; width: 600px; padding-top: 15%;">
		<div
			style="text-align: center; margin: 20px 0; border-radius: 10px; opacity: 0.5;">
			<h1>用户登录</h1>
		</div>
		<div style="background-color: transparent;">
			<form id="loginForm" style="margin: 0 auto; width: 500px;"
				method="POST">
				<table>
					<tr>
						<td style="text-align: right; font-size: 30px; opacity: 0.5;"><label
							for="username">用户名：</label></td>
						<td><input type=text name="username"
							style="background-color: transparent; width: 300px; height: 44px; border: 1px solid #000000; padding: 5px 10px; font-size: 24px; border-radius: 10px;">
						</td>
					</tr>
					<tr>
						<td style="text-align: right; font-size: 30px; opacity: 0.5;"><label
							for="password">密码：</label></td>
						<td><input type="password" name="password"
							style="background-color: transparent; width: 300px; height: 44px; border: 1px solid #000000; padding: 5px 10px; font-size: 24px; border-radius: 10px;">
						</td>
					</tr>
					<tr>
						<td colspan="2" style="text-align: right; padding-top: 10px;">
							<button id="login"
								style="width: 90px; height: 40px; font-size: 25px; border-radius: 10px;">登录</button>
							<button id="register"
								style="width: 90px; height: 40px; font-size: 25px; border-radius: 10px;">注册</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		$('#login').bind('click', function(e) {
			e.preventDefault();
			$('#loginForm').form('submit', {
				url : '/hello',
				success : function(data) {
					var result = $.parseJSON(data);
					if (result.flag == 1) {
						location.href = result.url;
					} else {
						$.messager.alert('警告', '用户名或密码错误！请重新登录')
					}
				}
			});
		});

		$('#register').bind('click', function(e) {
			e.preventDefault();
			$.get('/register', function(data, textStatus) {
				if (textStatus == 'success') {
					location.href = data.url;
				} else {
					$.messager.alert('警告', '网络错误');
				}
			});
		});
	</script>
</body>
</html>